<style scoped lang="scss">
.main {
  padding: 2vh;
  background-color: #2d3748;
}
.n-card {
  width: 20vw;
}
.n-slider {
  margin-top: 2vh;
}
.coordinate {
  margin-top: 2vh;
}

.n-input-number {
  width: 8vw;
}
</style>

<template>
  <div class="main">
    <n-flex justify="space-around" size="large">
      <div>
        <n-scrollbar style="max-height: 96vh">
          <canvas ref="canvas" width="1371" height="1920" :style="canvasStyle"></canvas>
        </n-scrollbar>
      </div>

      <div>
        <n-card>
          <n-space vertical>
            <n-slider v-model:value="value" :step="1" />
          </n-space>
        </n-card>
      </div>
    </n-flex>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
const props = defineProps<{
  id: string
}>()
const id = decodeURIComponent(props.id)
const value = ref(100)

const canvasStyle = computed(() => ({
  backgroundImage: `url('http://192.168.0.166:8084/image/${id}.png')`,
  transform: `scale(${value.value / 100})`,
  transformOrigin: 'top center'
}))

//检查
const filesList = ref<string[]>([])

const canvas = ref<HTMLCanvasElement | null>(null)
let ctx: CanvasRenderingContext2D | null = null

interface Point {
  x: number
  y: number
}

interface Shape {
  shapeIndex: number
  content: string
  type: string
  points: Point[]
}

const shapes = ref<Shape[]>([])
onMounted(async () => {
  if (canvas.value) {
    ctx = canvas.value.getContext('2d')

    // 根据 id 动态加载 JSON 文件
    const jsonData = await import(`@/assets/json/${id}.json`)

    if (jsonData.new_graphica && jsonData.new_graphica.length > 0) {
      shapes.value = jsonData.new_graphica.map(
        (shapeData: { shapeIndex: any; content: any; type: any; points: any }) => ({
          shapeIndex: shapeData.shapeIndex,
          content: shapeData.content,
          type: shapeData.type || '',
          points: shapeData.points
        })
      )

      drawAllShapes()
      canvas.value.addEventListener('click', handleCanvasClick)
    }

  }
})

function drawAllShapes() {
  if (!ctx) return
  ctx.clearRect(0, 0, canvas.value!.width, canvas.value!.height)

  shapes.value.forEach((shape) => {
    ctx!.beginPath()
    const { points } = shape
    switch (shape.type) {
      case 'rectangle':
        drawRectangle(points)
        break
      case 'square':
        drawSquare(points)
        break
    }

    ctx!.strokeStyle = 'red'
    ctx!.lineWidth = 2
    ctx!.stroke()
  })
}

function handleCanvasClick(event: MouseEvent) {
  if (!ctx) return

  const rect = canvas.value!.getBoundingClientRect()
  const x = event.clientX - rect.left
  const y = event.clientY - rect.top

  const clickedShape = getShapeAtPosition(x, y)
  if (clickedShape) {
    alert(clickedShape.content) // 点击图形后弹出其内容
  }
}

// 获取点击位置的图形
function getShapeAtPosition(x: number, y: number): Shape | null {
  for (const shape of shapes.value) {
    if (isPointInShape(x, y, shape)) {
      return shape // 返回匹配的图形
    }
  }
  return null
}

// 检查点是否在形状内
function isPointInShape(x: number, y: number, shape: Shape): boolean {
  const { points } = shape
  if (points.length < 4) return false // 确保有足够的点
  // 使用使用简单的矩形边界判定
  const minX = Math.min(...points.map((p) => p.x))
  const maxX = Math.max(...points.map((p) => p.x))
  const minY = Math.min(...points.map((p) => p.y))
  const maxY = Math.max(...points.map((p) => p.y))
  return x >= minX && x <= maxX && y >= minY && y <= maxY
}

function drawRectangle(points: Point[]) {
  if (points.length < 4) return
  const [p1, p2, p3, p4] = points
  ctx!.rect(p1.x, p1.y, p2.x - p1.x, p3.y - p1.y)
}

function drawSquare(points: Point[]) {
  if (points.length < 4) return
  const [p1, p2, p3, p4] = points
  const side = Math.min(p2.x - p1.x, p3.y - p1.y)
  ctx!.rect(p1.x, p1.y, side, side)
}
</script>
